import React, { Component, createRef } from 'react'
import './index.less'
import { Button, Tabs, Form, Input, message } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import classnames from 'classnames'
import { login } from '../../api/user'
const TabPane = Tabs.TabPane
const FormItem = Form.Item
export default class Login extends Component {
  state = {
    imgUrl: "/images/logo.jpeg",
    activityKey: "password",
    formRef: createRef()
  }

  handleLoginClick() {
    const {
      formRef
    } = this.state
    formRef.current.validateFields().then((val)=>{
      login(val).then(res=>{
        console.log(res)
        message.success('登录成功')
      })
    }).catch((e)=>{
      console.error(e)
    })
  }

  render() {
    const {
      activityKey,
      formRef
    } = this.state
    return (
      <div className='login-container'>
        <div className="bgMod">
          <img className='logoImg' src={this.state.imgUrl} />
          <div className='main'>
            <div className='title'>展会管理工作台</div>
            <div className='tabs'>
              <Tabs centered onChange={(activityKey) => this.setState({ activityKey })} accessKey={activityKey}>
                <TabPane tab={<span className={classnames('tab-title', { active: activityKey === 'password' })}>密码登录</span>} key="password" />
                <TabPane tab={<span className='tab-title'>验证码登录</span>} key="code" />
              </Tabs>
            </div>


            {
              activityKey === 'password' ? (
                <div>
                  <Form
                    layout="horizontal"
                    ref={formRef}
                  >
                    <FormItem
                      rules={[
                        {
                          required: true,
                          message: '请输入手机号/邮箱/账号',
                        },
                        {
                          validator(_, val, callback) {
                            // callback 必须调用  为空验证通过 不为空则是错误信息
                            // if(/fdsfsfsdf/g.test(val)){
                            //   callback()
                            // }
                            callback()
                          }
                        }
                      ]}
                      name="username"
                    >
                      <Input
                        placeholder='请输入手机号'
                        prefix={
                          <div style={{ height: '25px' }}>
                            <UserOutlined style={{ color: '#2f54eb' }} />
                          </div>
                        }
                      />
                    </FormItem>
                    <FormItem
                      name="password"
                    >
                      <Input
                        type="password"
                        placeholder='请输入密码'
                        prefix={
                          <div style={{ height: '25px' }}>
                            <LockOutlined style={{ color: '#2f54eb' }} />
                          </div>
                        }
                      />
                    </FormItem>
                    <FormItem>
                      <Button type='primary' block shape='round' size='large' onClick={this.handleLoginClick.bind(this)}>
                        登录
                      </Button>
                    </FormItem>
                  </Form>
                </div>
              ) : (
                <div />
              )}
          </div>
        </div>
      </div>
    )
  }
}
